<script lang="ts" setup>
import {
  getCurrentInstance,
  reactive,
  watch,
} from 'vue'
// import Input from '@/components/colorPicker/Input/index.vue'

interface Iprops {
  value: number | string
  type: string
  label: string
  onChange: (val?: number) => void
}

const props = withDefaults(defineProps<Iprops>(), {
  type: 'text',
  label: '',
  onChange: (val?: number) => false,
})
const instance = getCurrentInstance()
// const props = defineProps({
//     value: [String, Number],
//     type: String,
//     label: String,
//     onChange: Function,
// });

const state = reactive<{
  inputValue: any
  inProgress: boolean
}>({
  inputValue: props.value || 0,
  inProgress: false,
})

function setValue() {
  if (props.value !== +state.inputValue && state.inputValue !== '') {
    state.inputValue = props.value
  }
}

function onChangeHandler(event: any) {
  const value: number = +event.target.value
  if (Number.isNaN(value) || value < 0 || value > 255) {
    state.inputValue = props.value
    instance?.proxy?.$forceUpdate()
    return
  }
  state.inputValue = event.target.value
  props.onChange(value)
}

function onBlur() {
  if (!state.inputValue) {
    state.inputValue = props.value
  }
  state.inProgress = false
}

watch(
  () => props.value,
  () => setValue(),
)
</script>

<template>
  <div>
    <!-- <Input
      :value="state.inputValue"
      :type="props.type"
      :label="props.label"
      :on-focus="() => (state.inProgress = true)"
      :on-blur="onBlur"
      :in-progress="state.inProgress"
      classes="rgb"
      @input="onChangeHandler"
    /> -->
  </div>
</template>
